<template>
  <div class="heard-textarea" v-if="token" :class="'drawer-message-box' + store.styleInfo.colorType">
    <t-textarea
      :maxlength="500"
      placeholder="说两句吧～"
      v-model="parmas.content"
      :autosize="{ minRows: 9, maxRows: 16 }"
    />
    <div class="textarea-bottom">
      <span class="bottom-text">还可输入{{ 500 - parmas.content.length }}字</span>
      <!-- <div
          class="textarea-buttom"
          :style="{ background: store.styleInfo.themeColor, color: '#fff', fontSize: store.styleInfo.fontSize }"
        >
          发表评论  
        </div> -->
      <div
        @click="setComment"
        :style="{
          fontFamily: store.styleInfo.fontFamily,
          fontSize: store.styleInfo.mintitleSize,
        }"
        class="left-btn flex-c-c-c"
      >
        <div class="btn-box">
          <calligraphyButton iconSize="48px" />
        </div>
        <span
          :style="{
            fontSize: store.styleInfo.mintitleSize,
            color: '#fff',
          }"
          >发表{{ props.showpieceId == 0 ? '留言' : '评论' }}</span
        >
      </div>
    </div>
  </div>
  <div v-else>
    <div class="login-null">
      <div>
        <a
          :style="{
            color: colorList5[store.styleInfo.colorType - 1].themeColor,
          }"
          @click="goLogin"
          >登录注册</a
        >
        后留言你的想法～
      </div>
    </div>
  </div>
  <messageModel
    submitText="前往"
    title="提示"
    :visible="visibleMessage1"
    problem="您暂未登录"
    message="是否前往登录？"
    @closeClick="closeClick"
    @submitClick="pathSubmitClick"
  />
</template>

<script setup lang="ts">
// @ts-nocheck

import messageModel from '@/components/messageModel/index.vue';
import { getHeardToken } from '@/api/utils';
import calligraphyButton from './calligraphyButton.vue';
import { colorList5 } from '../../data';
import { addComment } from '@/api/comment/comment';
import { MessagePlugin } from 'tdesign-vue-next';
import { ref, computed, reactive } from 'vue';
import { useProjectStore } from '@/store';
import { doorUrl, outLogin } from '@/utils/minxin';
let token = getHeardToken();
let url = window.location.href;
let redirectUrl = doorUrl + 'login?redirect=' + url;
const goLogin = () => {
  outLogin(redirectUrl);
};
const visibleMessage1 = ref(false);
const store = useProjectStore();
const parmas = reactive({
  id: 0,
  content: '',
  showpieceId: 0,
  projectId: String(localStorage.getItem('projectId')),
});
const loading = ref(false);
const props = defineProps({
  showpieceId: {
    type: Number,
  },
});

const emit = defineEmits(['commentSuccess']);
const closeClick = () => {
  //取消
  visibleMessage1.value = false;
};
const pathSubmitClick = () => {
  //确认登陆

  visibleMessage1.value = false;
  let url = window.location.href;
  let redirectUrl = 'http://jiyi.show/#/login?redirect=' + url;
  outLogin(redirectUrl);
};
const setComment = async () => {
  let token = getHeardToken();
  if (!token) {
    visibleMessage1.value = true;
    return;
  }
  try {
    if (loading.value) {
      return;
    }
    if (!parmas.content) {
      MessagePlugin.error('请填写内容');
      return;
    }
    var valuestr = parmas.content.trim();
    //console.log(valuestr.length);

    if (valuestr.length == 0) {
      parmas.content = valuestr;
      MessagePlugin.warning('留言内容不能为空');
      return;
    }
    loading.value = true;
    parmas.showpieceId = props.showpieceId;
    let { statusCode } = await addComment(parmas);
    if (statusCode == 200) {
      if (props.showpieceId === 0) {
        MessagePlugin.success('留言成功，审核通过后展示');
      } else {
        MessagePlugin.success('评论成功，审核通过后展示');
      }
      emit('commentSuccess');
      parmas.content = '';
    }
    loading.value = false;
  } catch {
    loading.value = false;
  }
};
</script>

<style lang="less" scoped>
.heard-textarea {
  margin-top: 0px;
  width: 100%;
}
.textarea-bottom {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  // margin-top: 28px;
}
.bottom-text {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 24px;
}
.left-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  width: 165px;
  height: 48px;

  span {
    position: relative;
    z-index: 99;
    line-height: 24px;
    font-weight: 400;
  }
}
.btn-box {
  position: absolute;
  top: 0;
  left: 0;
}
.btn-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.textarea-buttom {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 48px;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 24px;
}
.drawer-message-box1 {
  margin-top: 0;
  :deep(.t-textarea__inner) {
    border: 1px solid #d4c2ad;
  }
}
.drawer-message-box2 {
  :deep(.t-textarea__inner) {
    border: 1px solid #452e20;
  }
}
.drawer-message-box3 {
  :deep(.t-textarea__inner) {
    border: 1px solid #353c48;
  }
}
.drawer-message-box4 {
  :deep(.t-textarea__inner) {
    border: 1px solid #353c48;
  }
}

:deep(.t-textarea__limit) {
  display: none;
}
.login-null {
  width: 1180px;
  height: 64px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 24px;
}
a {
  text-decoration: underline;
}
/deep/.t-textarea__inner:hover {
  border-color: var(--td-border-level-2-color);
}
</style>
